<%--
  Created by IntelliJ IDEA.
  User: YANG
  Date: 2019/11/20
  Time: 20:08
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>消息界面</title>
    <script src="Js/jquery-3.4.1.min.js"></script>
    <script src="Js/jquerysession.js"></script>
    <style>
        .change{
            width: 100%;
            background-color: #ECFFF2;
        }
        .incenter{
            width: 200px;
            height: 45px;
            margin: 0 auto;
            background-color: #6699CC;
        }
        .incenter2{
            margin-top: 10px;
            width: 500px;
            margin: 0 auto;
            background-color: #ECFFF2;
        }
        .incenter button{
            color: white;
            font-size: medium;
            padding: 0;
            margin: 0;
            width: 97px;
            height: 43px;
            background-color: #6699CC;
            border: 1px solid #003eff;
        }
        .item{
            margin-top: 10px;
            border: 1px solid #6699CC;

        }
    </style>
</head>

<body>
<script>
        //获得自己的UserID
    $(document).ready(function () {
        //默认加载收件箱
        $("#content").empty();
        $.ajax({
            type:"GET",
            url:"GetReceiveMessage.action?UserID="+<%=session.getAttribute("UserID")%>,
            dataType:"json",
            success:function (res) {

                for(var j=res.news.length-1;j>=0;j++){
                    $.session.set("UserID"+j,res.news[j].userID);
                    $.session.set("ToUserID"+j,res.news[j].toUserID)
                    $("#content").prepend('<div class="item"><div><p>发件人:'+res.user[j].userName+'&nbsp;&nbsp;&nbsp;&nbsp;'+'用户类型:'+res.user[j].userKind+'&nbsp;' +
                   '&nbsp;&nbsp;&nbsp;'+'发件时间:'+res.news[j].time+'</p></div>'+
                   '<div><p>'+'消息内容:'+res.news[j].message+ '</p></div>'+
                            '<div><button class="rereply" style="margin-left: 180px">立即回复</button><button class="redelete">删除信息</button></div>'
                            )
                }
            },
            error:function () {

            }
        })
    })
    $("#receive").click(function () {
        //点击收件箱

    })

    $("#post").click(function () {
        //点击发件箱
        $("#content").empty();
        $.ajax({
            type:"GET",
            url:"GetPostMessage.action?UserID="+<%=session.getAttribute("UserID")%>,
            dataType:"json",
            success:function (res) {

                for(var j=res.news.length-1;j>=0;j++){
                    $("#content").prepend('<div class="item"><div><p>收件人:'+res.user[j].userName+'&nbsp;&nbsp;&nbsp;&nbsp;'+'用户类型:'+res.user[j].userKind+'&nbsp;' +
                        '&nbsp;&nbsp;&nbsp;'+'发件时间:'+res.news[j].time+'</p></div>'+
                        '<div><p>'+'消息内容:'+res.news[j].message+ '</p></div>'+
                        '<div><button class="postreply" style="margin-left: 180px">立即回复</button><button class="postdelete">删除信息</button></div>'
                    )
                }
            }
        })
    })
        $("#content").on('click','.rereply',function(){
            //收到的信息，回复
            var index=$(".rereply").index(this)
            var userID=$.session.get("UserID"+index);
            //userid是发送者的id
            var toUserID=  $.session.get("ToUserID"+index);
             //touserid是自己的id
            $("#dialog1").show();
            $("#submit").click(function () {
                $.ajax({
                    type:"POST",
                    url:"ReplyReceive.action",
                    dataType:"json",
                    data:{
                        UserID:userID,
                        ToUserID:toUserID,
                        Reply:$("#reply").val(),
                    },
                    success:function (res) {
                        $("#dialog1").hide();
                        if(res.json.result==1){
                            alert("回复成功！")
                        }else{
                            alert("回复失败！")
                        }


                    }
                })
            })
            //怎么弹出
            $("#cancel").click(function () {
                $("#dialog1").hide();
            })
        })

</script>
<%--收信箱和发信箱需要居中--%>
<%--点击默认跳转到收件箱，默认的--%>
<div class="change">
     <div class="incenter">
          <button id="receive">收信箱</button>
          <button id="post">发信箱</button>
     </div>
    <div id="dialog1" style="position:fixed;background-color:#94ABCC;width: 300px;height:200px;top: 30%;left:0;right:0;margin: 0 auto;display: none" >
        <div style="margin: 0 auto;width: 30%;margin-top: 10px">
            <p style="font-size: large;color: white;">回复消息</p>
        </div>
        <form action="Reply.action" method="post">
             <textarea id="reply" style="width:100%;height:70%;" name="reply">
             </textarea>
            <input id="submit" type="button" value="提交" style="margin-left: 30px;width: 60px;background-color: #6699CC;color:white;">
            <input id="cancel" type="button" value="取消" style="margin-left:120px;width: 60px;background-color: #6699CC;color:white;">
        </form>
    </div>
    <div id="content" class="incenter2">
<%--消息内容，随着不同的点击加载不同的界面--%>
    </div>
</div>
</body>
</html>
